<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑者天地 - 主页</title>
    <link rel="stylesheet" href="css/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- 头部导航 -->
<div id="header-container"></div>

<!-- 主要内容区域 -->
<div class="container">
    <div class="welcome-banner">
        <h1>欢迎来到跑者天地</h1>
        <p>专业跑步论坛，分享跑步经验、训练计划、装备测评，与跑友们一起进步！</p>
        <a href="write.html" class="btn btn-primary">立即发帖</a>
    </div>

    <div class="main-content">
        <div class="content-area">
            <div class="card">
                <div class="card-header">
                    <h2>最新帖子</h2>
                    <div class="sort-options">
                        <select class="form-control" id="sortSelector">
                            <option value="newest">最新发布</option>
                            <option value="mostCommented">最多浏览</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div id = "card-body">


                    </div>


<!--                    <div class="post">
                        <div class="post-stats">
                            <div class="votes">35</div>
                            <div class="comments">22</div>
                        </div>
                        <div class="post-content">
                            <h3 class="post-title">跑步后如何科学恢复？10个有效方法分享</h3>
                            <p>长期跑步的人都知道恢复和训练同样重要。今天分享我实践多年的恢复方法，帮助减少受伤风险...</p>
                            <div class="post-meta">
                                <span><i class="fas fa-user"></i> 康复教练</span>
                                <span><i class="fas fa-clock"></i> 2天前</span>
                                <span><i class="fas fa-eye"></i> 324次浏览</span>
                            </div>
                        </div>
                    </div>-->

                </div>
            </div>
        </div>

        <div class="sidebar">
            <div class="card">
                <div class="card-body sidebar-card">
                    <h3 class="sidebar-title"><i class="fas fa-chart-line"></i> 社区数据</h3>
                    <div class="stats-grid">

                        <div class="stat-item">
                            <div class="stat-label">注册用户</div>
                            <div class="stat-number" id="stat-yhnumber">???</div>

                        </div>
                        <div class="stat-item">
                            <div class="stat-label">帖子数</div>
                            <div class="stat-number" id="stat-wznumber">???</div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body sidebar-card">
                    <h3 class="sidebar-title"><i class="fas fa-fire"></i> 热门话题</h3>
                    <ul class="topics-list" id="topics-list5">

<!--                        <li>-->
<!--                            <span>跑步装备测评</span>-->
<!--                            <span class="topic-count">986</span>-->
<!--                        </li>-->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer>
    <div class="container">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul class="footer-links">
                    <li><a href="#">社区简介</a></li>
                    <li><a href="#">团队介绍</a></li>
                    <li><a href="#">加入我们</a></li>
                    <li><a href="#">联系方式</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>跑步资源</h3>
                <ul class="footer-links">
                    <li><a href="#">训练计划</a></li>
                    <li><a href="#">装备指南</a></li>
                    <li><a href="#">营养建议</a></li>
                    <li><a href="#">赛事日历</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>帮助中心</h3>
                <ul class="footer-links">
                    <li><a href="#">使用指南</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">社区规则</a></li>
                    <li><a href="#">反馈建议</a></li>
                </ul>
            </div>

            <div class="footer-column">
                <h3>关注我们</h3>
                <ul class="footer-links">
                    <li><a href="#"><i class="fab fa-weixin"></i> 微信公众号</a></li>
                    <li><a href="#"><i class="fab fa-weibo"></i> 新浪微博</a></li>
                    <li><a href="#"><i class="fab fa-qq"></i> QQ群</a></li>
                    <li><a href="#"><i class="fab fa-bilibili"></i> Bilibili</a></li>
                </ul>
            </div>
        </div>

        <div class="copyright">
            &copy; 2023 跑者天地论坛 - 专业的跑步交流社区 | 让每一步都有意义
        </div>
    </div>
</footer>

<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>

<script>


    // 加载头部内容
    fetch('header.html')
        .then(response => response.text())
        .then(data => {
            document.getElementById('header-container').innerHTML = data;
            // 设置当前页面导航激活状态
            document.querySelector('a[href="index.html"]').classList.add('active');
        });


    fun1()


    document.getElementById('sortSelector').addEventListener('change', function(e) {
        switch(this.value) {
            case 'newest':
                fun1();
                break;
            case 'mostCommented':
                fun2();
                break;
        }
    });

    function fun1() {
        $.ajax({
            type:"get",
            url:"/articles/getArticlesByCreateTime",
            success:function (result1){
                console.log(result1)
                var result  = result1.data
                var articles = result;
                var finalHtml = '';
                for(var article of articles){
                    finalHtml += '<div class="post">';
                    finalHtml += '<div class="post-stats">';
                    finalHtml += '<div class="votes">'+article.articleId+'</div></div>';
                    finalHtml += '<div class="post-content">';
                    finalHtml += '<h3 class="post-title">'+article.title+'</h3>';
                    finalHtml += '<p>'+article.content.replace(/^##\s*/, '')+'</p>';
                    finalHtml += '<div class="post-meta">';
                    finalHtml += '<span><i class="fas fa-user"></i>'+article.author+'</span>';
                    finalHtml += '<span><i class="fas fa-clock"></i>'+article.createdAt+'</span>';
                    finalHtml += '<span><i class="fas fa-eye"></i>'+article.viewCount+'</span>';
                    finalHtml +='<a href="DetailPage.html?articleId='+article.articleId+'">查看全⽂&gt;&gt;</a>';
                    finalHtml += ' </div></div></div>';
                }
                $(".card .card-body #card-body").html(finalHtml);
            },
            error:function (error){
                if(error!=null&&error.status==401){
                    location.href = "/login.html"
                }
            }
        })
    }


    function fun2() {
        $.ajax({
            type:"get",
            url:"/articles/getArticlesByViewsCount",
            success:function (result1){
                var result = result1.data
                var articles = result;
                var finalHtml = '';
                for(var article of articles){
                    finalHtml += '<div class="post">';
                    finalHtml += '<div class="post-stats">';
                    finalHtml += '<div class="votes">'+article.articleId+'</div></div>';
                    finalHtml += '<div class="post-content">';
                    finalHtml += '<h3 class="post-title">'+article.title+'</h3>';
                    finalHtml += '<p>'+article.content.replace(/^##\s*/, '')+'</p>';
                    finalHtml += '<div class="post-meta">';
                    finalHtml += '<span><i class="fas fa-user"></i>'+article.author+'</span>';
                    finalHtml += '<span><i class="fas fa-clock"></i>'+article.createdAt+'</span>';
                    finalHtml += '<span><i class="fas fa-eye"></i>'+article.viewCount+'</span>';
                    finalHtml +='<a href="DetailPage.html?articleId='+article.articleId+'">查看全⽂&gt;&gt;</a>';
                    finalHtml += ' </div></div></div>';
                }
                $(".card .card-body #card-body").html(finalHtml);
            },
            error:function (error){
                if(error!=null&&error.status==401){
                    location.href = "/login.html"
                }
            }
        })
    }


    $.ajax({
        type:"get",
        url:"user/getUserCount",
        success:function (result){
            if(result.code=="SUCCESS"&&result.data!=null){
                $(".sidebar #stat-yhnumber").text(result.data)
            }
        },
        error:function (error){
            if(error!=null&&error.status==401){
                location.href = "/login.html"
            }
        }
    })

    $.ajax({
        type:"get",
        url:"articles/getArticleCount",
        success:function (result){
            if(result.code=="SUCCESS"&&result.data!=null){
                $(".sidebar #stat-wznumber").text(result.data)
            }
        },
        error:function (error){
            if(error!=null&&error.status==401){
                location.href = "/login.html"
            }
        }
    })

    $.ajax({
        type:"get",
        url:"articleTopic/getNameAndCount",
        success:function (result){
            if(result.code=="SUCCESS"&&result.data) {
                var finalHtml = '';
                var resultData = result.data;
                for (var data1 of resultData) {
                    finalHtml += '<li><span>'+data1.topicName+'</span>';
                    finalHtml += '<span className="topic-count">'+data1.topicNums+'</span></li>';
                }
                $(".card #topics-list5").html(finalHtml)
            }
        },
        error:function (error){
            if(error!=null&&error.status==401){
                location.href = "/login.html"
            }
        }
    })

</script>
</body>
</html>